<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>管理员设置</el-breadcrumb-item>
            <el-breadcrumb-item>管理员列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图 -->
        <el-card>
            <!-- 第一行的珊格布局 -->
            <el-row>
                <el-col :span="10">
                    <!-- 搜索框 -->
                    <el-input placeholder="请输入姓名或手机号查询" v-model="queryAdminInfo.query" class="input-with-select" clearable>
                        <el-button slot="append" icon="el-icon-search" @click="handleQueryChange"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="5">
                    <!-- 新增管理员按钮 -->
                    <el-button type="primary" @click="addDialogFormVisible = true">新增管理员</el-button>
                </el-col>
            </el-row>
            <!-- 管理员列表区域 -->
            <el-table :data="adminList" border style="width: 100%">
                <el-table-column prop="adminName" label="姓名"></el-table-column>
                <el-table-column prop="adminPhone" label="电话"></el-table-column>
                <el-table-column prop="createdTimeStr" label="注册时间"></el-table-column>
                <el-table-column prop="updatedTimeStr" label="修改时间"></el-table-column>
                <el-table-column label="状态" prop="statusBoolean" width="100px">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.statusBoolean" active-color="#13ce66" inactive-color="#ff4949" @change="adminStatusChange(scope.row)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180px">
                    <template>
                        <!-- 修改 -->
                        <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
                        <!-- 删除 -->
                        <el-button type="waring" icon="el-icon-delete" size="mini"></el-button>
                        <!-- 分配 -->
                        <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
                            <el-button type="danger" icon="el-icon-share" size="mini"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页插件 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="queryAdminInfo.pagenum" :page-sizes="[3, 5, 10]" :page-size="queryAdminInfo.pagesize"
                layout="total, sizes, prev, pager, next" :total="total">
            </el-pagination>
        </el-card>

        <!-- 添加管理员的弹框 -->
        <el-dialog title="新增管理员" :visible.sync="addDialogFormVisible">
            <el-form :model="addForm" :rules="addFormRules" ref="addFormRef">
                <el-form-item label="管理员名称" prop="adminName">
                    <el-input v-model="addForm.adminName"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="adminPhone">
                    <el-input v-model="addForm.adminPhone"></el-input>
                </el-form-item>
                <el-form-item label="管理员类型">
                    <el-select v-model="addForm.adminType" placeholder="请选择">
                        <el-option label="系统" value="1"></el-option>
                        <el-option label="商品" value="2"></el-option>
                        <el-option label="评论" value="3"></el-option>
                        <el-option label="测试" value="4"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addAdmin">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            queryAdminInfo:{
                query:'',
                pagenum:1,
                pagesize:3
            },
            adminList:[],
            total:0,
            // 这是控制新增弹框的显示与隐藏
            addDialogFormVisible:false,
            // 这是新增管理员的表单信息
            addForm:{
                adminName:'',
                adminPhone:'',
                adminType:1
            },
            // 这是新增管理员的验证方式
            addFormRules:{},
        }
    },
    methods:{
        async getAdminList(){
            const{ data:res } = await this.$http.post('admin/getAdminList',this.queryAdminInfo)
            if(res.code !== "200"){
                return this.$message.error("获取管理员列表失败")
            }
            this.adminList=res.data.adminList
            this.total=res.data.total
            console.log(res)
        },
        // 监听pagesize改变的事件
        handleSizeChange(newSize){
            //得到新的每页尺寸，给queryAdminInfo.pagesize赋值
            // console.log(newSize)
            this.queryAdminInfo.pagesize=newSize
            //调用getAdminList方法
            this.getAdminList()
        },
        // 监听pagenum改变的事件
        handleCurrentChange(newNum){
            this.queryAdminInfo.pagenum=newNum
            this.getAdminList()
        },
        //监听关键字改变的事件
        handleQueryChange(){
            this.getAdminList()
        },
        //修改管理员状态
        async adminStatusChange(adminInfo){
            // console.log("要修改的："+aid)
            const { data:res } = await this.$http.put('/admin/updAdminStatus/'+adminInfo.aid)
            if(res.code !== "200"){
                adminInfo.statusBoolean = !adminInfo.statusBoolean;
                return this.$message.error("更新管理员状态失败！")
            }
            this.$message.info("更新管理员状态成功！")
        },
        async addAdmin(){
            const { data:res } = await this.$http.post('/admin/addAdmin',this.addForm)
            addDialogFormVisible = false
        }

    },
    created(){
        this.getAdminList()
    }
}
</script>
